{% extends "news/base.html" %}
{% block title %}  注册页面   {% endblock %}
{% block css %}
{% load static %}
 <link rel="stylesheet" type="text/css" href="{% static 'news/css/bootstrap.min.css' %}">

{% endblock %}
{% block content %}
{% load static %}
<div style="width:1152px; height:52px; top: 25px; left: 200px; border: 1px solid rgba(96,96,96,0.5); position: relative">
    <div style="display:inline; width:5px; height:50px; background:black; border: 1px solid black; position: absolute"></div>
    <div style="display:inline; top: 23px; left: 17px; background:black; border: 3px solid black; position: absolute"></div>
    <div style="display:inline; top: 15px; left: 28px; position: absolute">欢迎您-注册</div>
    <div style="display:inline; position: absolute; top: 15px; left: 1000px;">已有账号？<a href="{% url 'news:user_login' %}">马上登录</a></div>
</div>
<div class="form1" >
    <form action="{% url 'news:user_register' %}" class="form-horizontal" method="post" name="form1">
        {% csrf_token %}
        <div class="form-group form-group-lg">
            <div class="ipt" style="margin-top: 153px; margin-left: 365px; width: 420px;">
                <input type="text"  class="form-control" name="phone" id="phone" placeholder="请输入正确的手机号">
            </div>
        </div>
        <div class="form-group form-group-lg">
            <div class="ipt" style=" margin-left: 365px; width: 280px">
                <input type="text" class="form-control" name="verificationCode" id="verificationCode" placeholder="验证码是6位数字">
            </div>
            <div style="margin-left: 650px; width: 133px; height:45px; margin-top: -45px; background: #0080FF; border: 1px solid rgba(96,96,96,0.5);">
                <a style="font-size: 16px; color: white; float: left; margin-left: 22px; margin-top:9px;" id="x1">获取验证码</a>
            </div>
        </div>
        <div class="form-group form-group-lg">
            <div class="ipt" style=" margin-left: 365px; width: 420px;">
                <input type="password"  class="form-control" name="password" id="pwd" placeholder="请输入密码">
            </div>
        </div>
         <div class="form-group form-group-lg">
             <div class="ipt" style=" margin-left: 365px; width: 420px;">
                <input type="password"  class="form-control" name="password1" id="r_pwd" placeholder="请再次输入密码">
            </div>
        </div>
        <br>
        <div class="ipt" style="margin-left: 352px; width: 420px;">
            <input type="button" id="btnRegister" class="btn btn-primary btn-lg btn-block " value="注册">
        </div>
    </form>
    {% if error_message %}
    <p>{{ error_message }}</p>
    {% endif %}
    <p>{{ form.errors }}</p>
</div>
{% endblock %}
{% block js %}
{% load static %}
<script src="{% static 'news/js/register.js' %}" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
			$('#x1').click(function(){
				phone = $('#phone')[0].value
			  	$.ajax({type:'POST',url:"{% url 'news:code' %}", data:{'phone':phone}});

			  });
    </script>
{% endblock %}